<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-button style="display:block;background-color:#f2f2f2">
          <el-button class="more" type="text" @click="dialogVisible = true">新增学科</el-button>
          <el-dialog title="新增学科" :visible.sync="dialogVisible" width="600px"  height="300px">
           <div style="height:100px;padding:0">
              <div>
              *学科名称：
              <input type="text" style="width:400px;height:30px" />
            </div>
            <div style="height:36px;line-height:36px;float:left;margin-top:20px">
              *是否显示：
              <el-switch
                v-model="value"
                active-value="0"
                inactive-value="1"
                active-text="开"
                inactive-text="关"
              ></el-switch>
            </div>
           </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addMes()">确 定</el-button>
            </span>
          </el-dialog>
        </el-button>
        <div style="margin-top:20px" class="search">
          <div
            style="width:80px;height:30px;line-height:30px;text-align:center;display:inline-block;font-size:14px;background-color:#f2f2f2"
          >学科名称</div>
          <el-input style="width:240px" v-model="object.subjectName"></el-input>
          <div class="right">
            <el-button type>清除</el-button>
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
        <el-table
          style="margin-top:10px;width: 100%"
          :data="dataList"
          border
          fit
          highlight-current-row
        >
          <el-table-column label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column label="学科名称">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建者">
            <template slot-scope="scope">
              <span>{{scope.row.creatorID}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <template slot-scope="scope">
              <span>{{scope.row.isFrontDisplay}}</span>
            </template>
          </el-table-column>
          <el-table-column label="二级目录">
            <template slot-scope="scope">
              <span>{{scope.row.twoLevelDirectory}}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <span>{{scope.row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题目数量">
            <template slot-scope="scope">
              <span>{{scope.row.totals}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="$router.push('directorys')">学科分类</el-button>
              <el-button type="text" size="mini" @click="$router.push('tags')">学科标签</el-button>
              <el-button type="text" size="mini" @click="handChange(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total"></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects'
export default {
  name: 'SubjectsList',
  data() {
    return {
      object: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      value: '0',
      total: 0,
      dataList: [],
      dialogVisible: false
    }
  },
  created() {
    this.getMes()
  },
  methods: {
    async getMes() {
      const { data } = await list(this.object)
      this.dataList = data.items
    },
    async addMes() {
      const data = await add(this.object)
      console.log(data)
    }
  }
}
</script>

<style scoped>
.search {
  position: relative;
}
.right {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
.more {
  padding: 0;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}
.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
</style>
